<template>
  <div class="wrapper">
    <JForm :form-config="dynamicValidateForm" :read="read" @handleBoxEvent="handleBoxEvent" />
  </div>
</template>

<script>
import JForm from '@/components/JForm'
import { getDictListByType } from '@/api/dictionaries'

export default {
  name: 'ClientUpdate',
  components: { JForm },
  props: {
    emitData: {
      type: Object,
      default: () => ({})
    },
    read: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const userInfo = [
      {
        name: 'name',
        label: '参数名称',
        type: 'string',
        required: true
      },
      {
        name: 'code',
        label: '参数编码',
        type: 'string',
        required: true
      },
      {
        name: 'value',
        label: '参数值',
        type: 'string',
        required: false,
        placeholder: ''
      },
      {
        name: 'isEffect',
        label: '支持立即生效',
        type: 'option',
        required: false,
        config: {}
      },
      {
        name: 'note',
        label: '备注',
        type: 'string',
        required: false,
        placeholder: ''
      }
    ]
    return {
      CITY_YN01: [],
      userInfo,
      formData: {}
    }
  },
  computed: {
    dynamicValidateForm() {
      const data = this.userInfo
      const result = []
      data.forEach(i => {
        const { type } = i
        if (type === 'option') {
          i.config.options = this.filterOption(i)
        }
        result.push(i)
      })
      if (this.formData) {
        result.forEach(i => {
          const { name } = i
          i.value = this.formData[name]
        })
      }
      return result
    },
    isEffectOption() {
      const data = this.CITY_YN01
      data.forEach(item => {
        const { code, name } = item
        item.value = +code
        item.label = name
      })
      return data
    }
  },
  watch: {
    // emitData: {
    //   handler: function(newval, oldval) {
    //     const isEmpty = Object.keys(newval)
    //     if (isEmpty.length) {
    //       const becomeWidget = this.transformValue(newval, 'widget')
    //       this.formData = becomeWidget
    //     }
    //   },
    //   immediate: true
    // }
  },
  created() {
    this.getDicCITY_TYPE()
  },
  mounted() {},
  methods: {
    getDicCITY_TYPE() {
      getDictListByType({ dictTypeCode: 'YN01' }).then(res => {
        const { code, data /* message */ } = res
        if (code === 200) { this.CITY_YN01 = data }
      })
    },
    // transformValue(value, type = '') {
    //   const result = value
    //   if (!type) return result
    //   const transForm = {
    //     isEffect: {
    //       from: { 'true': '1', 'false': '0' },
    //       widget: { '1': true, '0': false }
    //     }
    //   }

    //   const transFormKeys = Object.keys(transForm)

    //   transFormKeys.forEach(key => {
    //     const beforeVal = result[key]
    //     const afterVal = transForm[key][type][beforeVal]
    //     result[key] = afterVal
    //   })

    //   return result
    // },
    handleBoxEvent(emitObj) {
      this.submitForm(emitObj)
    },
    filterOption(item) {
      const key = item.name
      return this[`${key}Option`]
    },
    submitForm(emitObj) {
      // const target = this.transformValue(emitObj, 'from')
      this.$emit('handleBoxEvent', { target: emitObj })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
}
</style>
